<template>
  <view>
    <view class="content" style="background: #f8f8f8; height: 100vh; padding-top: 20rpx">
      <view class="tag-container">
        <u-tag :text="selectedCategory" bgColor="#0bc5ae" borderColor="#0bc5ae">
        </u-tag>
        <u-tag :text="selectedService" type="warning"></u-tag>
      </view>
      <view v-for="(item, index) in itemList" :key="index">
        <view class="order-card" @click="onItemClick(item.serverId)">
          <view class="title-and-status">
            <view class="title-left">
              <view class="title-main">
                {{ item.serverValue }}
              </view>
            </view>
          </view>
          <view class="item-tag" style="margin-bottom: 25rpx">
            <view class="service-tag" :key="idx" v-for="(service, idx) in item.categoryValueList">
              {{ service }}
            </view>
          </view>
          <!-- <view class="salary-list">
            <view
              class="salary-item"
              v-for="(item, index) in salaryData"
              :key="index"
            >
              <view class="item-content">
                <view class="item-value">{{ item.workHours }}小时</view>
              </view>
              <view class="item-content">
                <view class="item-value">{{ item.dailyRate }}元/天</view>
              </view>
              <view class="item-content">
                <view class="item-value">{{ item.monthlyRate }}元/月</view>
              </view>
            </view>
          </view> -->
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getServiceList } from "../../common/api/index.js"
export default {
  components: {},
  data() {
    return {
      tabbarValue: 0,
      titles: ["护士上门", "消息", "订单", "我的"],
      bannerList: ["https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/banner.png"], //轮播图
      gridList: [],
      tablist: [],
      current: 0,
      itemList: [],
      serverName: '',
      selectedCategory: '',
      selectedService: '',
      salaryData: [
        { workHours: 8, dailyRate: 170, monthlyRate: 4000 },
        { workHours: 24, dailyRate: 190, monthlyRate: 4450 }
      ]
    }
  },
  onLoad() {
    this.selectedCategory = uni.getStorageSync('selectedCategory')
    this.selectedService = uni.getStorageSync('selectedService')
  },
  mounted() {
    this.ids = uni.getStorageSync('selectedServices')
    this.serverName = uni.getStorageSync('selectedCategory')
    this.initList()
  },
  methods: {
    onItemClick(serverId) {
      let code = this.gridList[this.current].code
      uni.navigateTo({
        url: `/nursingWorkerPages/pages/itemDetail/itemDetail?code=${code}&serverId=${serverId}`,
      })
    },
    initList() {
      getServiceList({
        ids: this.ids.split(","),
        serverName: this.serverName
      }).then((res) => {
        let data = res.data.data
        this.gridList = data
        this.itemList = data[0].nurseServersList
      })
    },
    click(item) {
      if (item.index !== 0) {
        this.current = item.index
        this.itemList = this.gridList[this.current].nurseServersList
      }

    },
  },
};
</script>

<style lang="scss" scoped>
.order-card {
  margin-right: 30rpx;
  margin-left: 30rpx;
  background: white;
  padding: 30rpx;
  box-sizing: border-box;
  border-radius: 16rpx;
  margin-top: 20rpx;
  display: flex;
  flex-direction: column;

  .title-and-status {
    display: flex;
    width: 100%;
    justify-content: space-between;

    .title-left {
      display: flex;
      justify-content: flex-start;
      width: 65%;
      align-items: flex-end;

      .title-main {
        color: #333333;
        font-size: 35rpx;
        font-weight: 700;
        margin-right: 10rpx;
      }

      .subhead {
        color: #747474;
        font-size: 28rpx;
      }
    }

    .time {
      flex: 1;
      color: rgba(35, 35, 35, 0.7);
      font-size: 26rpx;
    }

    .status-box {
      display: flex;
      justify-content: center;
      align-items: center;

      .status {
        font-size: 35rpx;
        font-weight: 700;
        color: #333333;

        .status-price {
          color: #ffb35b;
        }
      }

      .status-line {
        font-size: 28rpx;
        font-weight: 700;
        color: #bdbdbd;
        text-decoration: line-through;
        margin-left: 10rpx;
        text-align: center;

        .status-price {
          color: #bdbdbd;
        }
      }
    }
  }

  .item-tag {
    display: flex;
    justify-content: flex-start;
    // width: 80%;
    align-items: center;
    margin-top: 20rpx;
    flex-wrap: wrap;
    // min-height: 130rpx;

    .service-tag {
      min-width: 110rpx;
      background-color: #eafaf5;
      font-size: 20rpx;
      color: #6f7070;
      padding: 10rpx;
      height: 50rpx;
      line-height: 30rpx;
      text-align: center;
      border-radius: 25rpx;
      margin-right: 10rpx;
      margin-bottom: 10rpx;
    }
  }

  .cycle-and-price {
    display: flex;
    justify-content: space-between;
    font-size: 25rpx;
    color: #6c6c6c;
    margin-top: 10rpx;

    .cycle {
      width: 80%;
    }

    .price {}
  }

  .project-row {
    display: flex;
    align-items: center;
    margin-top: 36rpx;

    .img {
      width: 136rpx;
      height: 136rpx;
      border-radius: 20rpx;
    }

    .name {
      color: #232323;
      font-size: 32rpx;
      font-weight: bold;
      margin-left: 24rpx;
    }
  }

  .info-row {
    display: flex;
    margin-top: 40rpx;

    .name {
      width: 136rpx;
      color: rgba(35, 35, 35, 0.7);
      font-size: 26rpx;
    }

    .value {
      color: #232323;
      font-size: 26rpx;
    }
  }

  .div-line {
    width: 100%;
    height: 2rpx;
    background: #f8f8f8;
    margin-top: 40rpx;
  }

  .price-and-pay {
    display: flex;
    align-items: center;
    margin-top: 20rpx;

    .left {
      display: flex;
      align-items: center;
      flex: 1;
    }

    .cancel-btn {
      width: 150rpx;
      height: 60rpx;
      border: solid 2rpx rgba(35, 35, 35, 0.26);
      border-radius: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(35, 35, 35, 0.8);
      font-size: 26rpx;
      margin-left: 8rpx;
      margin-right: 8rpx;
    }

    .ok-btn {
      width: 150rpx;
      height: 60rpx;
      border: solid 2rpx #0bc5ae;
      border-radius: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #0bc5ae;
      font-size: 26rpx;
      margin-left: 8rpx;
      margin-right: 8rpx;
    }
  }
}

.tag-container {
  display: flex;
  justify-content: flex-start;
  gap: 15rpx;
  margin-bottom: 15rpx;
  margin-left: 30rpx;
  margin-right: 30rpx;
}

.salary-list {
  margin-top: 10rpx;
  background-color: transparent;
  border-radius: 0;
  box-shadow: none;

  .title {
    text-align: left;
    font-size: 28rpx;
    color: #333;
    margin-bottom: 10rpx;
    padding-left: 10rpx;
  }

  .salary-item {
    display: flex;
    justify-content: space-between;
    background-color: #f9f9f9;
    border-radius: 8rpx;
    margin-bottom: 10rpx;
    padding: 10rpx 15rpx;

    .item-content {
      display: flex;
      justify-content: space-between;
      padding: 5rpx 0;
      // border-bottom: 1px solid #eee;
    }

    .item-content:last-child {
      border-bottom: none;
    }

    .item-label {
      font-size: 24rpx;
      color: #666;
    }

    .item-value {
      font-size: 24rpx;
      color: #333;
      font-weight: bold;
    }
  }
}
</style>
